<><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>steam</title>
  <link rel="stylesheet" href="reset.css" type="text/css">
  <link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<div class="page-content">
  <!--头部导航-->
  <div class="global_header">
    <div class="banner">
      <div class="content clearfix">
        <!--logo-->
        <div class="log leftfix">
          <a href="https://store.steampowered.com/?snr=1_4_4__global-header" aria-label="Link to the Steam Homepage">
            <img src="https://store.st.dl.eccdnx.com/public/shared/images/header/logo_steam.svg?t=962016" width="176"
                 height="44" alt="Link to the Steam Homepage">
          </a>
        </div>
        <!--中间菜单-->
        <div class="nav-menu clearfix">
          <a href="#">商店</a>
          <a href="#">社区</a>
          <a href="#">PIS-LEO</a>
          <a href="#">聊天</a>
          <a href="#">客服</a>
        </div>
        <!--右上角操作区-->
        <div class="action clearfix">

          <!--安装按钮-->
          <div class="install item">
            <a class="header_installsteam_btn header_installsteam_btn_gray"
               href="https://store.steampowered.com/about/?snr=1_4_4__global-header">
              <div class="header_installsteam_btn_content">
                安装 Steam
              </div>
            </a>
          </div>

          <!--通知按钮-->
          <div class="notice item">
            <a href="#">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" fill="none" class="notice-icon notice-ld">
                <g class="SVGIcon_Notification">
                  <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M32 24V26H4V24L8 19V12C8 9.34784 9.05357 6.8043 10.9289 4.92893C12.8043 3.05357 15.3478 2 18 2C20.6522 2 23.1957 3.05357 25.0711 4.92893C26.9464 6.8043 28 9.34784 28 12V19L32 24Z"
                        fill="currentColor"></path>
                  <path class="SVGIcon_Notification_Uvula" fill-rule="evenodd" clip-rule="evenodd"
                        d="M18 34C19.2396 33.9986 20.4483 33.6133 21.46 32.897C22.4718 32.1807 23.2368 31.1687 23.65 30H12.35C12.7632 31.1687 13.5282 32.1807 14.54 32.897C15.5517 33.6133 16.7604 33.9986 18 34Z"
                        fill="currentColor"></path>
                </g>
              </svg>
            </a>
          </div>

          <!--账户-->
          <div class="account item">
            <a href="#">
              Pis-Leo
            </a>
          </div>

          <!--头像-->
          <div class="avatar item">
            <img src="https://avatars.st.dl.eccdnx.com/596db650bcc73386538399dcbb332c941d56642b.jpg" alt="Pis-Leo">
          </div>
          <div class="balance">
            <a href="#">
              ¥ 0.00
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 中部菜单区 -->
  <div class="menu-area">
    <video id="videoBackground" class="background" muted loop autoplay playsinline>
    </video>
    <div class="menu">
      <div class="menu-line-1">
        <div>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" fill="none" class="menu-line-1-icon">
            <path
              d="M33.63 8.05005L30.11 20.81C29.9416 21.453 29.5645 22.0219 29.0378 22.4273C28.5111 22.8328 27.8647 23.0518 27.2 23.05H14.75C14.1022 23.0507 13.4715 22.8416 12.9524 22.4541C12.4333 22.0665 12.0536 21.5213 11.87 20.9L7.56 8.05005H2V4.05005H8.28C8.90845 4.05122 9.52067 4.24973 10.0302 4.61755C10.5398 4.98538 10.921 5.50394 11.12 6.10005L11.78 8.10005L33.63 8.05005ZM15 27.05C14.5055 27.05 14.0222 27.1967 13.6111 27.4714C13.2 27.7461 12.8795 28.1365 12.6903 28.5933C12.5011 29.0502 12.4516 29.5528 12.548 30.0378C12.6445 30.5227 12.8826 30.9682 13.2322 31.3178C13.5819 31.6674 14.0273 31.9056 14.5123 32.002C14.9972 32.0985 15.4999 32.049 15.9567 31.8597C16.4135 31.6705 16.804 31.3501 17.0787 30.939C17.3534 30.5278 17.5 30.0445 17.5 29.55C17.5 28.887 17.2366 28.2511 16.7678 27.7823C16.2989 27.3134 15.663 27.05 15 27.05ZM27 27.05C26.5055 27.05 26.0222 27.1967 25.6111 27.4714C25.2 27.7461 24.8795 28.1365 24.6903 28.5933C24.5011 29.0502 24.4516 29.5528 24.548 30.0378C24.6445 30.5227 24.8826 30.9682 25.2322 31.3178C25.5819 31.6674 26.0273 31.9056 26.5123 32.002C26.9972 32.0985 27.4999 32.049 27.9567 31.8597C28.4135 31.6705 28.804 31.3501 29.0787 30.939C29.3534 30.5278 29.5 30.0445 29.5 29.55C29.5 28.887 29.2366 28.2511 28.7678 27.7823C28.2989 27.3134 27.663 27.05 27 27.05Z"
              fill="currentColor"></path>
          </svg>
          购物车 (2)
        </div>
        <div>
          愿望单 (31)
        </div>
      </div>
      <div class="menu-line-2">
        <div class="menu-line-2-left">
          <img class="foryou_avatar menu-line-2-left-item-img" src="/img/avatar.png" alt="">
          <span class="menu-line-2-left-item-first">
            您的商店
            <div class="sub-menu">
              <dl>
                <dd class="sub-menu-item">主页</dd>
                <dd class="sub-menu-item">关注的软件和游戏</dd>
                <dd class="sub-menu-item">偏好</dd>
                <dt class="sub-menu-item-lable">推荐</dt>
                <dd class="sub-menu-item">探索队列</dd>
                <dd class="sub-menu-item">新品队列</dd>
                <dd class="sub-menu-item">社区推荐</dd>
                <dd class="sub-menu-item">交互式推荐模型</dd>
                <dd class="sub-menu-item">好友中热门</dd>
                <dd class="sub-menu-item">Steam 鉴赏家</dd>
                <dd class="sub-menu-item">为您推荐的 DLC</dd>
                <dt class="sub-menu-item-lable">因为您喜爱</dt>
                <dd class="sub-menu-item">大逃杀</dd>
                <dd class="sub-menu-item">电竞</dd>
                <dd class="sub-menu-item">团队导向</dd>
                <dd class="sub-menu-item">竞技</dd>
                <dd class="sub-menu-item">为您推荐更多标签...</dd>
              </dl>
            </div>
          </span>
          <span class="menu-line-2-left-item recommend">
            新鲜推荐
            <div class="sub-menu-recommend">
              <dl class="sub-menu-recommend-area">
                <dt class="sub-menu-item-lable">最热门</dt>
                <dd class="sub-menu-item">热销商品</dd>
                <dd class="sub-menu-item">最常玩的游戏</dd>
                <dd class="sub-menu-item">偏好</dd>
                <dd class="sub-menu-item">新品</dd>
                <dd class="sub-menu-item">即将推出</dd>
                <dt class="sub-menu-item-lable">新闻与更新</dt>
                <dd class="sub-menu-item">最近更新</dd>
                <dt class="sub-menu-item-lable">促销与活动</dt>
                <dd class="sub-menu-item">特别优惠</dd>
                <dd class="sub-menu-item">特卖活动</dd>
                <dd class="sub-menu-item">Steam 年度回顾</dd>
                <dd class="sub-menu-item">Steam 新品节</dd>
                <dd class="sub-menu-item">Steam 大奖</dd>
                </dl>
            </div>
          </span>
          <span class="menu-line-2-left-item">类别</span>
          <span class="menu-line-2-left-item">点数商店</span>
          <span class="menu-line-2-left-item">新闻</span>
          <span class="menu-line-2-left-item">实验室</span>
        </div>
        <div class="menu-line-2-right">
          <input type="text" placeholder="搜索"/>
          <img src="https://store.akamai.steamstatic.com/public/images/blank.gif" alt="">
        </div>
      </div>
    </div>
  </div>


</div>

<script>
  window.addEventListener('load', function () {
    // 设置视频背景随机播放
    var video = document.getElementById("videoBackground");
    var videoSrc = ["/video/mp4_page_bg_schinese.mp4", "/video/mp4_page_bg_schinese2.mp4"]; // 视频文件路径数组
    var randomIndex = Math.floor(Math.random() * videoSrc.length);
    video.src = videoSrc[randomIndex];
  });


</script>
</body>
</html>
</>
